<template>
	<div>
		<div class="form">
			<el-input v-model="filterData.memberId" placeholder="会员编号"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-input v-model="filterData.name" placeholder="姓名"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<p>审核状态:
				<el-select v-model="filterData.status" placeholder="请选择">&nbsp;&nbsp;&nbsp;&nbsp;
					<el-option v-for="item in statusSelect" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</p>			
			<p style='margin-bottom: 20px;'>
				<el-button type="info" @click='query'>查询</el-button>
				<el-button type="info" @click='reset'>重置</el-button>
				<el-button type="info" @click="allCheck" :disabled='dealData.id.length<1'>批量审核</el-button>
			</p>
		</div>
		<el-table border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" :selectable="selectable">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click.native.prevent="checkIn(scope)" type="text" size="small" v-if='scope.row.status == 1'>
						审核
					</el-button>
					<el-button @click.native.prevent="check(scope)" type="text" size="small">
						查看
					</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="任务编号">
			</el-table-column>
			<el-table-column prop="memberId" label="会员编号">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="80">
			</el-table-column>
			<el-table-column prop="idCard" label="身份证号" width="170">
			</el-table-column>
			<el-table-column prop="submitTime" label="提交时间" width="230">
			</el-table-column>
			<el-table-column prop="title" label="广告名称" width="200">
			</el-table-column>
			<el-table-column prop="voucher" label="完成凭证" width="80">
				<template slot-scope="scope">
					<img :src="scope.row.voucher"/>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="审核状态" width="100" :formatter='formStatus'>
			</el-table-column>
			<el-table-column prop="verifyName" label="审核人" width="120">
			</el-table-column>
			<el-table-column prop="time" label="审核时间" width="230">
			</el-table-column>
		</el-table>
		<el-pagination  small layout="prev, pager, next" :total="total">
		</el-pagination>
		<!--查看弹窗-->
		<el-dialog title="查看" :visible.sync="centerDialogVisible" width="55%" center>
			<div class="dialog">
				<p><span>会员编号：</span><span class="dialog-msg">{{checkData.memberId}}</span></p>
				<p><span>姓名：</span><span class="dialog-msg">{{checkData.name}}</span></p>
				<p><span>身份证号：</span><span class="dialog-msg">{{checkData.idCard}}</span></p>
				<p><span>广告名称：</span><span class="dialog-msg">{{checkData.title}}</span></p>
				<p>
					<span>完成凭证：</span>
					<span class="dialog-msg">
						<img :src="checkData.voucher" @click="imgDialog = true"/>
					</span>
				</p>
				<p>
					<span class="dialog-msg">
						<el-radio v-model="radiosBox" :label="2" :disabled='notEdit'>通过</el-radio>
		      			<el-radio v-model="radiosBox" :label="3" :disabled='notEdit'>不通过</el-radio>		  				
		  				<el-radio v-model="radiosBox" :label="4" :disabled='notEdit'>存疑</el-radio>
					</span>
				</p>				
			</div>
			<span slot="footer" class="dialog-footer">
		      	<el-button @click="centerDialogVisible = false">取 消</el-button>
		      	<el-button @click="centerDialogVisible = false">确 定</el-button>
	    	</span>
		</el-dialog>
		<!--审核弹窗-->
		<el-dialog title="审核" :visible.sync="checkInDialog" width="55%" center>
			<p>
				<span>处理结果：</span><span class="dialog-msg">
  				<el-radio v-model="dealData.status" :label="2">通过</el-radio>
				<el-radio v-model="dealData.status" :label="3">不通过</el-radio>
				<el-radio v-model="dealData.status" :label="4">存疑</el-radio>
			</span>
			</p>
			<p v-if="dealData.status == '3'">
				<span>不通过原因：</span><span class="dialog-msg">
	  				<el-input type="textarea" v-model="dealData.reason"></el-input>
				</span>
			</p>
			<span slot="footer" class="dialog-footer">
		      	<el-button @click="checkInDialog = false">取 消</el-button>
		      	<el-button type="primary" @click="sureCheckIn">确 定</el-button>
		    </span>
		</el-dialog>
		<el-dialog title="" :visible.sync="imgDialog" width="55%" center>
			<img :src="checkData.voucher" style='width: 100%;'/>
		</el-dialog>
	</div>
</template>

<script type="text/javascript">
	import {taskPage,taskVerify,formatter} from '@/api/common'
	export default {
		created(){
			this.query();
		},
		methods: {
			selectable(row, index){				//判断是否可以选中
	        	if(row.status == 1){
	        		return true;
	        	}else{
	        		return false;
	        	}
	        },
			formStatus(row, column){		
				return(formatter(row.status,this.statusSelect))
			},
			check(data) {							//列表查看
				this.centerDialogVisible = true;
				this.checkData = JSON.parse(JSON.stringify(data.row));
				this.notEdit = true;
				this.radiosBox = data.row.status;
			},
			checkIn(data){							//单个审核按钮
				this.checkInDialog = true;
				this.notEdit = false;
				this.dealData.id = [];
				this.dealData.id.push(data.row.id);
				this.dealData.reason = '';
			},
			allCheck(){								//批量审核
				this.checkInDialog = true;			
				this.dealData.reason = '';
			},
			sureCheckIn(){							//确认审核
				this.checkInDialog = false;	
				console.log(this.dealData)
				taskVerify(this.dealData).then(res =>{
					this.query();
					this.$message.success(res.msg)
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			handleSelectionChange(val) {		//多选框	
				let arr = [];
				val.map(function(item){
					arr.push(item.id)
				});
				this.dealData.id = arr;
				console.log(this.dealData)
			},
			
			query(){								//查询						
				if(this.timeSelect.length > 0){
					this.filterData.startTime = this.timeSelect[0];
					this.filterData.endTime = this.timeSelect[1];
				}
				taskPage(this.filterData).then(res =>{					
					this.tableData = res.data.records;
					this.total = res.data.total;
					console.log(res)
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			reset(){										//重置
				this.filterData = {					 
					memberId: null, 		//会员编号
					name: '', 			//姓名
					status: null, 		//审核状态
					startTime:'',		//开始时间
					endTime:'',			//开始时间
					current:1,
					size:10
				};
				this.query();
			},
		},
		data() {
			return {
				//主列表数据
				filterData:{
					memberId: null, 		//会员编号
					name: '', 			//姓名
					status: null, 		//审核状态
					startTime:'',		//开始时间
					endTime:'',			//开始时间
					current:1,
					size:10
				},
				checkData: {			//查看点击数据
					
				}, 	
				dealData:{
					reason:'',
					status:2,							//处理
					id: [],								//多选框
					verifyUser:parseInt(this.$store.state.user.userId),	//审核人id
				},
				centerDialogVisible: false,
				dealResult: '',
				total:null,							//总条数
				tableData: [],
				notEdit:true,
				timeSelect:[],
				radiosBox:null,
				checkInDialog:false,
				imgDialog:false,
				
				//辅助性数据
				statusSelect: [{ 					//状态下拉框
					value: 0,
					label: '进行中'
				}, {
					value: 1,
					label: '未审核'
				}, {
					value: 2,
					label: '通过'
				}, {
					value: 3,
					label: '审核未通过'
				}, {
					value: 4,
					label: '存疑'
				}],
				pickerOptions2: { //日期选择框
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
			}
		}
	}
</script>

<style scoped>
	.form .el-input,.form .el-select{
		width: 120px;
		margin-bottom: 20px;
	}
	
	.form p {
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	
	.area-select-wrap {
		display: inline-block;
		margin-right: 20px;
		margin-left: 0;
	}
	
	.area-select-wrap .area-select {
		height: 40px;
		vertical-align: middle;
	}
	.dialog p {
		display: inline-block;
		width:45%;
		padding-left: 10px;
	}
	.dialog p .dialog-msg {
		word-wrap: break-word;
		word-break: normal;;
	}
	.el-table__row img {
		width:50px
	}
	
	.dialog-msg img {
		width:75px
	}
</style>